<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            position: fixed;
            right: 5px;
            bottom: 5px;
            /* display: none; */
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 如果标签名或属性名为大写 浏览器解析式默认转化为小写 -->
    <DIV CLASS="ONE"></DIV>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">点击</button></p>

        <!-- 根组件调用了全局组件 my-adver   (adverTime => advertime有问题 => 如果属性名驼峰式命名法建议写成中划线命名 ->子组件解析为还会被还原为驼峰式命名法)-->

        <!-- 注意: 子组件接收的属性(数据) 是由父组件传入的  -->
        <!-- 当前案例传入的属性时静态属性(属性值都是字符串类型) => 传入之后不可更改 => 跟习惯作为子组件的初始值 -->
        <my-adver a="10" b="20" adver-time="20" :loop="true" link="https://www.baidu.com" src="https://img11.360buyimg.com/pop/s1180x940_jfs/t1/147555/7/28947/50083/63edc924Fe779c03b/9e4414b596ad315d.jpg.avif"></my-adver>
    </div>
</body>
<template id="myAdver">
    <div class="adver-wrapper" v-if="isShow">
        <div class="adver-header">
            <div class="adver-tips">距离广告关闭还有{{countTime}}秒</div>
            <div class="adver-close" @click="closeHandler">x</div>
        </div>
        <div class="adver-main">
            <a :href="link">
                <img :src="src" alt="">
            </a>
        </div>
    </div>
</template>
<script>

    
    // 全局组件  => 缺点 (倒计时时间  是否重复广告  广告的图片  点击广告时跳转的地址 都是定死的)
    // 期望 => 其他组件(父组件) 在使用此组件是可以传递一些数据 (!数据是父组件给子组件传入的)

    // 父组件 => 传数据
    // 子组件 => 接收数据

    // 单向数据流 =>  子组件不能直接修改父组件传入的数据   

    // 直接修改会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "countTime"

    // 避免直接更改属性，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于属性值的数据或计算属性。正在变异的属性：“countTime”

    // 这么改? 间接改
    
    Vue.component("my-adver",{
        // 对应属性名称接收父组件传递的数据 
        // 1. 被接收的数据也会直接挂载到子组件的实例化对象上 (初始化阶段)-. 可以通过实例化对象直接方法  (注意: 也可以通过this.$props查看所有被接收的数据)
        // 2. 由于组件被被设计为单向数据流 => 子组件不能直接修改父组件传入的数据 => 可以将被接收的父组件的数据作为子组件某项数据的初始值
        props:["a","b","adver-time","loop","link","src"],  
        data:function(){
            // this -> 当前Vue(子组件)
            return {
                isShow:false,
                delayTime:5000,
                countTime:this.adverTime,   //倒计时时间  (将接收的adverTime作为countTime的初始值传入)
                // loop:true,
                timeoutTimer:null,
                intervalTimer:null,
            }
        },
        template:"#myAdver",
        methods: {
            showAdver:function(){
                clearTimeout(this.timeoutTimer);
                this.timeoutTimer = setTimeout(()=>{
                    this.isShow = true;
                    this.intervalTimer = setInterval(()=>{
                        this.countTime --;
                        if(this.countTime <=0){
                            clearInterval(this.intervalTimer);
                            this.countTime = this.adverTime;
                            this.isShow = false;
                            if(this.loop){
                                this.showAdver();
                            }
                        }
                    },1000);
                },this.delayTime);
            },
            closeHandler(){
                clearTimeout(this.timeoutTimer);
                clearInterval(this.intervalTimer);
                this.isShow = false;
                this.countTime = this.adverTime;
                if(this.loop){
                    this.showAdver();
                }
            }
        },
        mounted() {
           this.showAdver();
           console.log("子组件的实例",this);
           console.log("子组件的实例的$props",this.$props);
           console.log("接收到父组件传递的数据",this.a,this.b);
        },
    })
    
    // 根实例 / 根组件 (初始化渲染)
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        },
    })
   

   

</script>

</html>